<template>
  <el-dialog
    width="536px"
    :title="title"
    center
    :visible="showExcelDialog"
    custom-class="my-dialog"
    @close="close"
  >
    <el-row type="flex" justify="center">
      <!-- <el-button type="text" @click="getTemplate"
            >下载{{ modelName }}模板</el-button
          > -->
      <el-upload
        class="upload-demo"
        drag
        action="#"
        accept=".xls,.xlsx"
        :auto-upload="false"
        :limit="1"
        :headers="header"
        :on-exceed="handleExceed"
        :on-change="handleChange"
        :on-remove="handleRemove"
        :file-list="fileList"
      >
        <div class="drop">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </div>
      </el-upload>
    </el-row>
    <el-row type="flex" justify="center" style="margin-top: 16px">
      <el-button type="primary" class="chamfer-98" @click="uploadTemplate">
        确认
      </el-button>
      <el-button
        class="chamfer-98"
        style="margin-left: 20px"
        @click="$emit('update:showExcelDialog', false)"
      >
        取消
      </el-button>
    </el-row>
  </el-dialog>
</template>
<script>
import { importExportList } from '@/api/materialManage'
export default {
  props: {
    title: {
      type: String,
      default: 'Excel导入'
    },
    showExcelDialog: {
      type: Boolean,
      default: false
    },
    modelName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      header: { 'Content-Type': 'multipart/form-data' },
      fileList: []
    }
  },
  methods: {
    close() {
      this.$emit('update:showExcelDialog', false)
      this.fileList = []
    },
    // 下载导入模版
    // async getTemplate() {
    //   console.log('下载导入模版')
    // },
    // 文件超出个数限制时的钩子
    handleExceed(file, fileList) {
      return this.$message.warning('一次只能上传一个文件')
    },
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handleChange(file, fileList) {
      this.fileList.push(file.raw)
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    // 导入
    async uploadTemplate() {
      if(this.fileList.length == 0){
        return this.$message.error('请选择文件！')
      }
      /* 判断输入的文件的类型 */
      let array = this.fileList[0].name.toLowerCase().split('.')
      let type = array[array.length - 1]
      if (type != 'xls' && type != 'xlsx') {
        return this.$message.error('导入的文件类型有误！')
      }
      let fd = new FormData()
      fd.append('file', this.fileList[0])
      // let result = await importExportList(fd)
      // console.log(result)
      this.$emit('importFn', fd)
    }
  }
}
</script>

<style lang="scss">
@import '~@/styles/_handle.scss';

.el-upload-list__item-name {
  @include font_color('material_edit_color');
  font-weight: 700;
}
</style>
<style scoped lang="scss">
::v-deep .el-dialog__body {
  padding: 5px 20px 20px;
}
::v-deep .el-upload-dragger {
  border: none;
}
::v-deep .drop {
  text-align: center;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  line-height: 40px;
  color: #bbb;
  .el-upload__text {
    font-size: 18px;
  }
}
::v-deep .el-upload-list__item {
  font-size: 16px;
}
.chamfer-98 {
  font-size: 16px;
}
</style>
